@charset "UTF-8";

//---------------------------------------------------
// layout.scss
//---------------------------------------------------

// header样式在_header.scss中定义

.footer,
.header-sub{
    position: fixed;
    left: 0;
    right: 0;
}
.footer {
    bottom: 0;
    z-index: $zIndexFooter;
}
.header-sub{
    top: $barHeight;
    z-index: $zIndexHeader;
}
.page {
    width: 100%;
    padding-top: $barHeight;
    &.page--header-sub{
        padding-top: $barHeight * 2;
    }
    &.page--no-header{
        padding-top: 0;
    }
    &.page--has-footer{
        padding-bottom: $barHeight + 4px;
    }
}
.ios{
    .page{
        position: absolute;
        top: $barHeight;
        bottom: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        &.page--header-sub{
            top: $barHeight * 2;
            padding-top: 0;
        }
        &.page--no-header{
            top: 0;
        }
        &.page--has-footer{
            bottom: $barHeight + 4px;
        }
    }
}

// 页面切换class
.transition {
    position: absolute;
    animation-fill-mode: both;
}

// page 位置
.transition--right-in {
    animation: pageRightIn 0.3s $timingFunction;
}
.transition--left-out {
    animation: pageLeftOut 0.4s $timingFunction 0.1s;
}

.transition--left-in {
    animation: pageLeftIn 0.3s $timingFunction;
}
.transition--right-out {
    animation: pageRightOut 0.4s $timingFunction 0.1s;
}

@keyframes pageRightIn {
    0% {
        transform: translate3d(100%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes pageLeftOut {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
}
@keyframes pageLeftIn {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes pageRightOut {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}